<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

    {% load static %}
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-注册</title>
	<link rel="stylesheet" type="text/css" href="{% static "css/reset.css" %}">
	<link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}">
	<script type="text/javascript" src="{% static "js/jquery-1.12.4.min.js" %}"></script>
	<script type="text/javascript" src="{% static "js/register.js" %}"></script>
    <link rel="icon" href="">
</head>
<body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
//短信验证
    <script type="text/javascript">
    $(function(){
        var btn1 = $('#sendsms');
        var count=60; // 倒计时数量 一般为60秒!
        var timer =null;
        btn1.click(function () {
            var phone = $('#phone').val();
            if(phone==''){
                alert('请输入电话号码');
                return false;
                        }
            $.ajax({
                type:'get',
                url:'/send_sms/',
                data:'phone='+phone,
                success:function (msg) {
                    obj=eval("("+msg+")");
                    alert('222');
                    if(obj.Message=='OK'){
                        $('#msg').html('成功')
                    }else{
                        $('#msg').html('失败')
                }
            },


        })
    });
	$("#smscode").change(function(){
		console.log('开始验证.....')
		//1 获取phone和验证码
		var phone = $("#phone").val()
		var code = $(this).val()
		// 2 ajax
		$.ajax({
			type:'get',
			url:'/check_sms/',
			data:'phone='+phone,
			success:function(msg){
				//结果已经统一规整为json对象了,不需要转换了
				console.log('结果就是对象'+typeof(msg))
				if(msg.code=='200'){
					$('#msg').html('验证码正确')
				}else{
					$('#msg').html('验证码输入错误')
				}
			},
			error:function(resp){
				console.log(resp.status)
				alert('连接服务器失败')
			}
		})
	})
})
//end 短信验证
</script>
  <script>
      $(function(){
          //刷新
          $('.captcha').click(function(){
                 $.getJSON("/img_refresh/",function(result){
                $('.captcha').attr('src', result['image_url']);
            $('#id_captcha_0').val(result['hashkey'])
          });
         return false;
          });
          //验证
          $('#id_captcha_1').blur(function(){
                console.log('用户输入的:'+$('#id_captcha_1').val());
                // 获取输入框和隐藏字段id_captcha_0的数值
                code= $('#id_captcha_1').val();
                hashkey=$('#id_captcha_0').val();
              $.getJSON('/img_check', {'code':code,'hashkey':hashkey},function(res){
                        //1 验证码正确,0验证码错误
                        alert('验证判断结果...:'+res);
                        if(res.status){
                                $("#msg").html('验证码正确')
                                }else{
                                $("#msg").html('验证码错误')
                                }
                })
          })
      })
  </script>
<!--短信Ajax-->
	<div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="{% static "images/logo02.png" %}"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="#">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" action="{% url "goods:register_handle" %}">
                {% csrf_token %}
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name">
                        <span style="color: red">{{ error_msg }}</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd">
                        <span style="color: red">{{ error_msg }}</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd">
                        <span style="color: red">{{ error_msg }}</span>
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email">
                        <span style="color: red">{{ error_msg }}</span>
						<span class="error_tip">提示信息</span>
					</li>
                    <li>
						<label>电话:</label>
						<input type="text" name="phone" id="phone">
                        <span style="color: red">{{ error_msg }}</span>
						<span class="error_tip">提示信息</span>
					</li>
                    <li>
                        <label>短信验证:</label>
                        <input type="text" name='code' id='smscode' class="form-control" placeholder="短信验证码" required>
                        <span id="msg"></span>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6	">
	                        <button class="btn btn-lg btn-info btn-block" id="sendsms" type='button' style='font-size:14px;'>获取送验证码</button>
	                    </div>

                    </li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2">提示信息</span>
					</li>


					<li class="reg_sub">
						<input type="submit" value="注 册" name="">
					</li>
				</ul>

				</form>


			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
</body>
</html>